<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>理解methods</h3>

        <p>姓名：{{name}}</p>
        <p>{{changeName1()}}</p>
        
    </div>


    <script>
        // Vue构造器中的参数是一个对象，它有很多的属性
        // el,
        // data
        // methods
        // ... 还有好多好多....

        // methods 是一个对象
        // 在对象中，正常定义函数

        // (1) 定义函数
        // (2) 调用函数
        //   1. 通过vm实例来调用
        //   2. 也可以在页面上，通过{{函数名}}来调用 --不推荐--
        //   3. 当做事件的回调函数来使用。

        

        const vm = new Vue({
            el: "#app",
            data: {
                name: '凡哥-凡叔'
            },
            methods: {
                // 定义函数
                // 函数用来做你自己业务逻辑

                // 方法1：
                "changeName1": function() {
                    console.log('changeName1')
                    this.name = "小凡1"
                },
                // 方法2：推荐
                // es6中支持对对象中的方法的简写
                changeName2 () {
                    console.log('changeName2')
                    console.log(this == vm)
                    this.name = "小凡2"
                },
                // 方法3：箭头函数。
                // 其中的this是有问题！！
                // 这里的this指向的是window，而不是vm实例
                // 所以，不能使用this来操作数据。
                changeName3: () => {
                    console.log('changeName3')
                    console.log(this)
                    this.name = "小凡3"
                }
            }
        })

        // console.log(vm)
        // vm.changeName2()
        // vm.changeName1()
    </script>

</body>
</html>